<template>
    <Form ref="form" :model="form" :rules="ruleValidate" :label-width="100">

        <FormItem label="分类" prop="type_name">
            <Select v-model="form.type_name" @on-change="studentData" placeholder="请选择分类">
                <Option v-for="(item,index) in tezcherList" :value="item.id" :key="index">{{ item.name.zh?item.name.zh:item.name.mn }}</Option>
            </Select>
        </FormItem>
        
        <FormItem label="状态">
            <RadioGroup v-model="form.type" @on-change="radioChange">
                <Radio v-for="(item,index) in typeList" :label="item.value" :key="index">{{ item.label }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem v-if="studState" label="学生" prop="suser_id">

            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
            </div>

            <CheckboxGroup v-model="form.suser_id" @on-change="checkAllGroupChange">
                <Checkbox v-for="(item,index) in studentList" :key="index" :label="item.user_id">{{ item.student_name }}</Checkbox>
            </CheckboxGroup>
        </FormItem>

        <FormItem v-if="studState" label="细则" prop="watchlist_rules_id">
            <Select v-model="form.watchlist_rules_id" @on-change="rulesChange" placeholder="请选择细则">
                <Option v-for="(item,index) in rulesList" :value="item.watchlist_rules_id" :key="index">{{ item.labels }}</Option>
            </Select>
        </FormItem>

        <FormItem v-if="states" label="分值" prop="fixed_score">
            <Input v-model="form.fixed_score" placeholder="请输入固定分值"></Input>
        </FormItem>

        <!-- <FormItem label="值班老师" prop="dutyteacher">
            <Select v-model="form.dutyteacher" placeholder="请选择值班老师">
                <Option v-for="(item,index) in teacherList" :value="item.user_id" :key="index">{{ item.teacher_name.zh?item.teacher_name.zh:item.teacher_name.mn }}</Option>
            </Select>
        </FormItem> -->

        <FormItem label="备注" prop="remarks">
            <Input v-model="form.remarks.zh" placeholder="请输入备注"></Input>
        </FormItem>

        <FormItem>
            <Button type="primary" :loading="butload" @click="handleSubmit('form')">修改</Button>
        </FormItem>
    </Form>
</template>
<script>
export default {
    props: ['condition'],
    data () {
        return {
            form: {
                data_log_id: this.condition,
                suser_id: [],
                watchlist_rules_id: null,
                type_name: null,
                // dutyteacher: null,
                remarks: {
                    zh: null,
                    en: null,
                    mn: null,
                },
                type: 1,
            },
            studState: false,

            indeterminate: true,
            checkAll: false,
            typeList: [
                { label: '正常', value: 1 },
                { label: '异常', value: 2 }
            ],
            butload: false,
            states: false,
            studentList: [],
            tezcherList: [],
            rulesList: [],
            teacherList: [],

            url: 'api/watchlist/v1/phoneticbeautytdata/edits',
            selUrl: 'api/watchlist/v1/phoneticbeautytdata/find/',
            rulesUrl: 'api/watchlist/v1/get/phoneticbeautytrules/list',
            studentUrl: 'api/watchlist/v1/get/phoneticbeauty/lists?typeid=',
            teacherType: 'api/watchlist/v1/get/phoneticbeautyclass/listteacher',
            teacherUrl: 'api/watchlist/v1/get/phoneticbeautyt/list',
            ruleValidate: {
                watchlist_rules_id: [
                    { required: true, type: 'number', message: '请选择细则', trigger: 'change' }
                ],
                suser_id: [
                    { required: true, type: 'array', message: '请选择学生', trigger: 'change' }
                ],
                fixed_score: [
                    { required: true, message: '请输入固定分值', trigger: 'blur' }
                ],
                type_name: [
                    { required: true, type: 'number', message: '请选择分类', trigger: 'change' }
                ],
            },
        }
    },
    methods: {
        radioChange(index) {
            console.log(index,'状态')
            if (index == '2') {
                this.studState = true
            }else{
                this.studState = false
            }
        },
        handleCheckAll () {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                if(this.studentList.length != 0) {
                    this.studentList.forEach(item => {
                        this.form.suser_id.push(item.user_id)
                    })
                }else{
                    this.form.suser_id = []
                }
            } else {
                this.form.suser_id = [];
            }
        },
        checkAllGroupChange (data) {
            if (data.length === this.studentList.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        },

        // ==================================================
        // 表单验证
        // ==================================================
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },

        // ==================================================
        // 提交
        // ==================================================
        submit(){
            let datas = JSON.parse(JSON.stringify(this.form))
            if (this.form.type == '1') {
                delete datas.suser_id
                delete datas.watchlist_rules_id
            }
            this.butload = true
            this.$http.post(this.url,datas).then(res => {
                this.$emit('requery',true)
                this.butload = false
            }).catch(err => {
                this.butload = false
            })
        },

        // ==================================================
        // 选择细则
        // ==================================================
        rulesChange(index) {
            if(index != null){
                let data = this.rulesList.find(item => item.watchlist_rules_id == index)
                console.log('22323',data)
                if(data.fixed_score == null) {
                    this.states = true
                    this.$set(this.form,'fixed_score',null)
                }else{
                    this.states = false
                    delete this.form.fixed_score
                }
            }
        },

        // ==================================================
        // 查询细则
        // ==================================================
        rulesData(){
            this.$http.get(this.rulesUrl).then(val => {
                let datas = JSON.parse(JSON.stringify(val.data))
                datas.forEach(item => {
                    let num = ''
                    item.labels = ''
                    if(item.fixed_score == null) {
                        num += '(' + item.lowest_score + '到' + item.highest_score + '分)'
                        item.labels += item.entry_content + num
                    }else{
                        num += '(' + item.fixed_score + '分)'
                        item.labels += item.entry_content + num
                    }
                    this.rulesList.push(item)
                })

                this.selData(this.condition)
            }).catch(err => {
            })
        },

        // ==================================================
        // 查询学生
        // ==================================================
        studentData(index){
            this.form.suser_id = []
            this.$http.get(this.studentUrl + index).then(val => {
                this.studentList = JSON.parse(JSON.stringify(val.data))
            }).catch(err => {
            })
        },

        // ==================================================
        // 查询当前老师的所有分类
        // ==================================================
        teacherDatas(){
            this.$http.get(this.teacherType).then(val => {
                this.tezcherList = JSON.parse(JSON.stringify(val.data))
            }).catch(err => {
            })
        },
        
        // ==================================================
        // 查询单条数据
        // ==================================================
        selData(val){
            this.$http.get(this.selUrl + val).then(res => {
                let singleData = JSON.parse(JSON.stringify(res.data))
                console.log('获取单条数据',singleData)
                this.form.suser_id = singleData.student
                this.form.remarks = singleData.remarks
                this.form.watchlist_rules_id = parseInt(singleData.watchlist_rules_id)
                this.form.type_name = parseInt(singleData.type_name)
                this.form.type = singleData.type
                if (singleData.type != 1) this.studState = true
                this.studentData(singleData.type_name)
                setTimeout(() => {
                    this.form.suser_id = singleData.student
                },1500)
            }).catch(err => {
            })
        },

        // ==================================================
        // 查询老师
        // ==================================================
        teacherData(){
            this.$http.get(this.teacherUrl).then(val => {
                this.teacherList = val.data
            }).catch(err => {
            })
        },
    },
    mounted () {
        this.rulesData()
        this.teacherDatas()
        this.teacherData()
    },
};
</script>

<style scoped>
    .form {
        width: 100%;
    }
</style>